<%--
  Created by IntelliJ IDEA.
  User: John
  Date: 2019/10/29
  Time: 16:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>通用权限管理系统</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<jsp:include page="common/header.jsp" />

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <jsp:include page="common/menu.jsp" />
        </div>
    </div>

    <div class="layui-body">

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            </div>
        </script>

        <table id="role_table" lay-filter="role_table"></table>

        <script type="text/javascript">
            layui.use(['table', 'layer'], function(){
                var table = layui.table
                    ,layer = layui.layer;
                table.render({
                    elem: "#role_table",
                    toolbar: '#toolbarDemo',
                    data: [
                        {id:1, roleName:'admin', remark:'超级管理员'},
                        {id:2, roleName:'user', remark:'普通用户'}
                    ],
                    cols: [[
                        {type:'checkbox'}
                        ,{field:'id', width:80, title: 'ID'}
                        ,{field:'roleName', width:80, title: '角色名称'}
                        ,{field:'remark', width:80, title: '备注'}
                    ]]
                });

                //头工具栏事件
                table.on('toolbar(role_table)', function(obj){
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch(obj.event){
                        case 'getCheckData':
                            var data = checkStatus.data;
                            layer.alert(JSON.stringify(data));
                            getSelectIds(data);
                            break;
                    };
                });
            })

            function getSelectIds(selectRows) {
                if(!selectRows) {
                    return "";
                }
                var ids = "";
                for(var rowIdx in selectRows) {
                    console.log(selectRows[rowIdx]);
                    ids += selectRows[rowIdx].id;
                    ids += ",";
                }

                alert("选中行的数据ID值： " + ids);
            }

        </script>

    </div>

<jsp:include page="common/footer.jsp" />
